<template>
    <view >
        <block v-if="is_show==1">
        <form @submit="formSubmit" report-submit='true'>
            <view class="release_content">
                <view>
                    <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
                        :interval="interval" :duration="duration" previous-margin="10px" next-margin="10px">
                        <swiper-item v-for="(i,n) in imgList" :key="n">
                            <image :src="i" class="swiperImg"  mode="aspectFit"></image>
                        </swiper-item>
                    </swiper>
                    <view class="release_item" style="margin-top: 20rpx;">

                        <view class="textarea">
                            <input v-model="formData.title" placeholder-class='placeholder' type="text" placeholder="填写标题会有更多赞哦~" />
                        </view>
                    </view>
                    <view class="line"> </view>
                    <view class="release_item">

                        <view class="textarea">
                            <textarea placeholder='描述你的作品或分享你的创作想法~' name="comment" placeholder-class='placeholder'
                                v-model="formData.content" maxlength="1000"></textarea>
                        </view>
                    </view>
                    <view class="release_item">
                        <!-- <view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="iconfont icon-baobeilianjie"></text>添加宝贝({{productList.length}})</view>
							<view class="select">
								<view class="select_count" @click.stop="addProduct">
									<text v-if="productList.length == 0" class="text">选择演唱会音乐会</text>
									<view v-else class="text">
										<image class="image" v-for="(item,index) in productList" :key="index" :src="item.image || (item.spu && item.spu.image)"></image>
									</view>
									<text class="iconfont icon-xiangyou"></text>
								</view>
							</view>
						</view> -->
                        <view class='item acea-row row-between-wrapper'   >
                            <view class='name acea-row'>
                                <image src="../../../static/images/cate1.png" mode="widthFix"></image>
                                作品分类</view>
                            <view class="select">
                                <view class="select_count">
                                    <!-- <text v-if="!topicName.topic_name" class="text">选择话题</text> 
                                    <text v-else class="text_name" @click.stop="deleteTopic">
                                        <text class="icon">#</text>
                                        <text class="title">{{topicName.topic_name}}</text>
                                        <text class="iconfont icon-guanbi5"></text>
                                    </text> -->
                                    <text class="icon">#</text>
                                    <text class="title">{{cate}} 一 {{cate1}} </text>
                                    <text class="iconfont icon-xiangyou"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <button class="release_btn button" form-type="submit">发布</button>
            </view>
        </form>
      
        <view class='mask' catchtouchmove="true" :hidden='showVideo==false' @click.stop="showVideo=false"></view>
        <avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx">
        </avatar>
        <!-- 提到的宝贝弹窗 -->
        <uni-popup ref="associated" type="bottom">
            <associated @close="close" @getProduct="getProduct" :checkedObj="productList"></associated>
        </uni-popup>
        <!-- 话题弹窗 -->
        <uni-popup ref="participateTopic" type="bottom">
            <participate-topic @close="close" @getTopic="getTopic"></participate-topic>
        </uni-popup>
        <!-- 绑定手机号 -->
        <uni-popup ref="bindmobile" type="bottom">
            <bindmobile @close="closepoup" :isCommuity="true"></bindmobile>
        </uni-popup>
        </block>
        <image v-if="is_show==0" src="../static/images/no-topic.png" style="margin: 0 auto;" mode="widthFix"></image>
    </view>
</template>

<script>
    // +----------------------------------------------------------------------
    // | ju [星际明星娱乐-寻找好声音]
    // +----------------------------------------------------------------------
    // | Copyright (c) 2024 https://jufeiniu.com/ All rights reserved.
    // +----------------------------------------------------------------------
    // | Author: 巨说还行-乔欣弥弥-巨肥牛 <jufeiniu@163.com>
    // +----------------------------------------------------------------------
    // | Personal site: https://jufeiniu.com/
    // +----------------------------------------------------------------------
    import {
        mapGetters
    } from "vuex";
    import avatar from "@/components/yq-avatar/yq-avatar.vue";
    import associated from '../components/associated.vue';
    import participateTopic from '../components/participateTopic.vue';
    import bindmobile from '@/components/bindmobile.vue';
    import {
        TOKENNAME,
        HTTP_REQUEST_URL
    } from '@/config/app.js';
    import {
        toLogin
    } from '@/libs/login.js';
    import {
        createPlantApi,
        updatePlantApi,
        plantDetailApi,
        orderAssociatePlantApi
    } from "@/api/community";
    import {
        getUserInfo
    } from '@/api/user.js';
    import {
        setStorage,
        getStorage
    } from '../../../libs/uniApi.js';
    import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
    import {
        configMap
    } from '@/utils';
    import store from '@/store';
    import {
        AiStatus,syInfo
    } from '@/api/ai.js'
    export default {
        components: {
            avatar,
            associated,
            participateTopic,
            bindmobile,
            easyLoadimage
        },
        data() {
            return {
                indicatorDots: false,
                posterImageStatus: true,
                circular: false,
                autoplay: false,
                interval: 3000,
                duration: 500,
                formData: {
                    image: [],
                    content: "",
                    topic_id: "",
                    spu_id: [],
                    video_link: '',
                    title:"",
                    request_id:""
                },
                imageSrc: '',
                productList: [],
                topicName: {},
                isUpload: true,
                showCd: false,
                id: "",
                order_id: "",
                imgName: "",
                upload_max: 50,
                
                tabActive: 1,
                tabLength: 3,
                isPlay: false,
                
                video_link: "",
                showVideo: false,
                videoplay: false,
                videoContext: '',
                paramsStr: '',
                imgList: [],
                cate:"",
                cate1:"",
                is_show:0

            };
        },
       
        watch: {},
        mounted() {
        
        },
        computed: {
        	...mapGetters(['isLogin', ]),
        },
        onReady() {
            syInfo({id:52}).then(res=>{
                this.is_show=res.data.data[0].is_show
                console.log(res)
                if(res.data.data[0].is_show==0) uni.setNavigationBarTitle({
                    title:'蓝港'
                })
            })
        },
        onLoad(options) {
            if(!this.isLogin){
                toLogin()
            }
            uni.removeStorageSync('paramStr')
            if(options.cate) this.cate = options.cate
            if(options.cate1) this.cate1 = options.cate1
            if(options.imgList) this.imgList= JSON.parse(options.imgList)
            this.paramsStr = options.paramsStr
            this.formData.request_id= options.paramsStr
            
        },
        onShow() {
            // this.getAiTask()
        },
        methods: {
            async getAiTask() {
                let data = await AiStatus({
                    method: 'POST',
                    api: 'progress',
                    paramsStr: `req_id=${this.paramsStr}`
                })
                console.log(data)
                this.imgList = data.data.data
            },
            /*获取图文详情*/
            getDetail() {
                let that = this
                plantDetailApi(that.id).then(res => {
                    that.formData = res.data
                    that.productList = res.data.relevance || []
                    that.topicName = res.data.topic || {}
                }).catch(err => {
                    return that.$util.Tips({
                        title: err
                    });
                })
            },
            /*添加话题*/
            addTopic() {
                this.$refs.participateTopic.open();
            },
            close() {
                this.$refs.associated.close();
                this.$refs.participateTopic.close();
            },
            /*获取选中的宝贝*/
            getProduct(data) {
                this.productList = data;
                this.formData.spu_id = data.map(val => val.spu_id)
                this.$refs.associated.close();
            },
            /*获取选中的话题*/
            getTopic(item) {
                if (!item.topic_id) {
                    this.topicName = {}
                } else {
                    this.topicName = item
                }
                this.formData.topic_id = item.topic_id;
                this.$refs.participateTopic.close();
            },
            /**
             * 提交数据
             */
            formSubmit: function(e) {
                let that = this;
                if (that.community_auth == 0) {
                    that.submitData()
                } else {
                    getUserInfo().then(res => {
                        /*判断是否绑定手机号*/
                        if (res.data.phone) {
                            that.submitData()
                        } else {
                            that.$refs.bindmobile.open()
                        }
                    });
                }

            },
            closepoup() {
                this.$refs.bindmobile.close()
            },
            submitData() {
                let that = this;
                let value = that.formData;
                that.tabActive = that.formData.video_link ? 2 : 1
           
                  
                    uni.showLoading({
                        title: '保存中',
                        mask: true
                    })
                    this.formData.image=this.imgList
                    that.id ? updatePlantApi(that.id, value).then(res => {
                        uni.hideLoading()
                        that.$util.Tips({
                            title: res.messge,
                            icon: 'success'
                        });
                      
                            // uni.redirectTo({
                            //     url: '/pages/plantGrass/plant_detail/index?id=' + res.data
                            //         .community_id + '&type=' + that.tabActive
                            // })
                        
                    }).catch(err => {
                        return that.$util.Tips({
                            title: err
                        });
                    }) : createPlantApi(value).then(res => {
                        uni.hideLoading()
                        that.$util.Tips({
                            title: res.messge,
                            icon: 'success'
                        });
                            // uni.reLaunch({
                            //     url:'/pages/index/index'
                            // })
                            uni.reLaunch({
                            	url:'/pages/short_video/nvueSwiper/index?id='+res.data.community_id
                            })
                        
                    }).catch(err => {
                        return that.$util.Tips({
                            title: err
                        });
                    })
                
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background: #F5F5F5;
    }

    .crop_btn {
        line-height: 90rpx;
        height: 90rpx;
        height: calc(90rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
        height: calc(90rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    }

    .container {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
        width: 750rpx;
        height: 100vh;
    }

    .release_content {
        margin: 30rpx 20rpx 0;

        .release_tab {
            border-radius: 16rpx 16rpx 0 0;
            border-bottom: 1rpx solid #E4E4E4;
            background: #fff;
            align-items: center;
            justify-content: center;
            height: 86rpx;

            .tab_item {
                margin: 0 40rpx;
                font-size: 32rpx;
                color: #999;
                position: relative;
                line-height: 86rpx;
                cursor: pointer;

                &.on {
                    color: #E93323;

                    &::after {
                        content: "";
                        display: inline-block;
                        width: 100%;
                        height: 3rpx;
                        background: #E93323;
                        position: absolute;
                        bottom: 2rpx;
                        left: 0;
                    }
                }

                .iconfont {
                    margin-right: 10rpx;
                    font-size: 32rpx;
                }
            }
        }

        .release_item {

            padding: 0 30rpx;
            border-radius: 10rpx;
        }

        .photo_count {
            padding: 30rpx 0;
        }
    }

    /deep/.input_photo .easy-loadimage,
    /deep/.input_photo uni-image,
    /deep/.input_photo image {
        width: 202rpx;
        height: 202rpx;
        border-radius: 12rpx !important;
    }

    .input_photo .pictrue {
        width: 202rpx;
        height: 202rpx;
        border-radius: 12rpx !important;
        margin-right: 20rpx;
        position: relative;
        overflow: hidden;

        &:nth-child(3n) {
            margin-right: 0;
        }

        .close_btn {
            width: 30rpx;
            height: 30rpx;
            background: rgba(0, 0, 0, .6);
            border-radius: 0 12rpx 0 12rpx;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;

            .iconfont {
                color: #ffffff;
                font-size: 12rpx;
            }
        }

        .cover_text {
            display: flex;
            width: 58rpx;
            height: 29rpx;
            background: #E93323;
            border-radius: 0px 12rpx 0px 12rpx;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 10;
            align-items: center;
            justify-content: center;
            font-size: 18rpx;
            color: #fff;
        }
    }

    /deep/.loading-img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 12rpx;
    }

    .input_photo .pictrue {
        margin-bottom: 20rpx;

        .videoHover {
            width: 204rpx;
            height: 204rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;

            >view {
                width: 50rpx;
                height: 50rpx;
                background: #000000;
                border-radius: 50rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .iconfont {
                    color: #ffffff;
                    font-size: 21rpx;
                }
            }
        }

        .video-text {
            display: block;
            width: 180rpx;
            text-align: center;
            color: #ffffff;
            font-size: 18rpx;
            z-index: 13;
            position: absolute;
            bottom: 20rpx;
        }

        video {
            width: 180rpx;
            height: 180rpx;
            border-radius: 12rpx;
        }
    }

    .input_photo .add {
        background: #f6f6f6;
        color: #666666;

        .iconfont {
            font-size: 50rpx;
        }

        .text {
            margin-top: 20rpx;
            font-size: 27rpx;
        }
    }

    .textarea textarea {
        font-size: 28rpx;
        padding-bottom: 38rpx;
        width: 100%;
        box-sizing: border-box;
        height: 400rpx;
        line-height: 40rpx;
        overflow: hidden;
        
    }

    input,textarea{
        color:#fff;
    }
    .placeholder {
        color: #888;
    }
    .line{
        margin: 20rpx 0;
        background-color: #fff;
        height: 2rpx;
        width: 100%;
    }
    .release_item .item {
        height: 106rpx;
        border-top: 1px solid rgba(36,36,36,1);
        border-bottom: 1px solid rgba(36,36,36,1);
        position: relative;
        font-size: 30rpx;
        
      
        image{
            width: 40rpx;
            height: auto;
            margin-right: 10rpx;
        }
        .name {
            color: #fff;
            align-items: center;
          
        }

        .select {
            color: #bbbbbb;

            .select_count {
                display: flex;
                align-items: center;
            }

            .text {
                margin-right: 15rpx;
                display: flex;
                align-items: center;

                .image,
                image,
                uni-image {
                    width: 60rpx;
                    height: 60rpx;
                    margin-right: 5rpx;
                }
            }

            .iconfont {
                font-size: 24rpx;
            }

            .text_name {
                color: var(--view-theme);
                padding: 5rpx 12rpx;
                background: var(--view-minorColor);
                border-radius: 23rpx;
                font-size: 24rpx;
                margin-right: 10rpx;

                .icon {
                    color: var(--view-theme);
                    font-weight: bold;
                    font-size: 24rpx;
                }

                .title {
                    margin: 0 10rpx;
                }

                .iconfont {
                    font-size: 16rpx;
                }
            }
        }
    }

    .button {
        width: 500rpx;
        height: 110rpx;
        line-height: 110rpx;
        color: #ffffff;
        text-align: center;
        font-size: 40rpx;
        background: #9069FF;
        border-radius: 110rpx;
    }

    .release_btn {
        margin: auto;
        position: fixed;
        bottom: 40rpx;
        left: 0;
        right: 0;
        z-index: 80;

    }

    .video-count {
        position: fixed;
        width: 600rpx;
        height: 500rpx;
        top: 50%;
        left: 50%;
        margin-left: -300rpx;
        margin-top: -250rpx;
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: center;

        .videoLink {
            width: 600rpx;
            height: 500rpx;
        }
    }

    .mask {
        z-index: 80;
    }
    .swiper{
        width: 440rpx;
        margin: 0 auto;
        height: 420rpx;
    }
    .swiperImg{
        border-radius: 10rpx;
        width:400rpx;
        height: 400rpx;
        margin: 0 auto;
    }
</style>